<script setup lang="ts">
let gridAutoFlow = ref('row')

</script>

<template>
<div class="wrap">
  <h3>确定隐式网格中的列数</h3>
  <ul>
    <p>网格算法试图确定隐式网格中的列数，可以通过下面步骤完成</p>
    <li>该算法从显式网格中的列数开始</li>
    <li>然后，它遍历所有有明确列位置的网格项目，并在隐式网格的开头和结尾增加列轨道，以容纳所有网格项目</li>
    <li>最后，它通过所有没有明确列位置的表格项目。如果所有没有明确列位置的网格项目中最大的列跨度大于显式网格的宽度，则在网格的末端增加列以适应这个列跨度</li>
  </ul>
  <div class="form">
    <label>grid-auto-flow</label>
    <select v-model="gridAutoFlow" name="" id="">
      <option value="row">row</option>
      <option value="column">column</option>
      <option value="dense">dense</option>
      <option value="row dense">row dense</option>
      <option value="column dense">column dense</option>
    </select>
  </div>

  <section>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      我是一个文本节点(TextNode)
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </section>
</div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap {
  --auto-flow: v-bind(gridAutoFlow);

  --color-primary: #3740ff;
  --color-primary-dark: #272eb5;
  --color-primary-light: #3740ff;
  --color-primary-x-light: #e8f0fe;
  --color-light: #ffffff;
  --color-dark: #202124;
  --color-off-white: #f3f4f4;
  --color-mid: #5f6368;
  --color-mid-dark: #3c4043;
  --color-stroke: #dadce0;
  --metric-gutter: 1.5rem;
  --metric-box-spacing: 1rem;
  --metric-radius: 3px;
  --generic-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3),
  0px 2px 6px 2px rgba(60, 64, 67, 0.15);
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;
  gap: 2rem;

  section {
    width: 1000px;
    margin: 0 auto;
    font-family: "Bungee Shade", cursive;
    font-size: 1.2rem;

    display: flex;
    box-shadow: 0 0 0 6px rgb(217 210 10 / 9%);
    border-radius: 4px;

    .container {
      --width: 100%;

      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 80px);
      grid-auto-columns: 100px;
      grid-auto-rows: 100px;
      grid-auto-flow: var(--auto-flow);

      outline: 1px dashed;

      width: var(--width);
      padding: 1rem;

      &:before, &:after {
        content: '';
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #bbd7af;
        color: #000;
        font-family: "Bungee Shade", cursive;
        font-size: 2rem;
      }

      &:before {
        content: 'Before';
        grid-row-start: 2;
      }
      &:after {
        content: 'After';
        background-color: #ece1c2;
        grid-column: span 2;
      }

      .item {
        counter-increment: item;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #2c6;
        color: #000;
        position: relative;

        &:nth-child(1) {
          grid-area: 1 / 3 / 2 / 3;

          background-color: #bbd7af;
          background-image: repeating-conic-gradient(
                  from 7.5deg at 50% 0,
                  transparent 0 15deg,
                  #09f336 0 30deg
          ),
          linear-gradient(177deg, #f196f312, #f4433609);
          mix-blend-mode: overlay;
          background-blend-mode: screen;
          box-shadow: inset 0px 0px 0px 3px rgb(159 86 181 / 50%);
          text-shadow: 1px 1px 0 rgb(255 255 255 / 0.5);
        }

        &:nth-child(2) {
          grid-area: 2 / 2 / 4 / span 2;
          background-color: #dac2f1;
        }

        &:nth-child(3) {
          grid-row: 3 / 5;
          background-color: #ccf1c2;
        }

        &:nth-child(4) {
          grid-row: 3 / 5;
          grid-column: 4 / span 2;
          background-color: #c2e9f1;
        }

        &:nth-child(5) {
          grid-column-start: span 2;
          background-color: #9f10ae;
        }

        &:nth-child(6) {
          background-color: #f44336;
        }

        &:nth-child(7) {
          background-color: #2196f3;
        }

        &:nth-child(8) {
          background-color: #f196f3;
        }

        &::before {
          content: counter(item);
          font-family: "Bungee Shade", cursive;
          font-size: 3.5rem;
        }

      }
    }
  }


}
</style>
